<template>
  <div class="app-container home" style=" min-width: 820px;">
    <div style="width: 1180px;margin: 0 auto">
      <el-card class="box-card" style="margin: 10px;max-width: 1540px">
        <div slot="header">
          <span class="cardTitle">系统公告</span>
        </div>
        <div class="text item">
          <span class="text-success msg" v-text="this.essentials.sysNotice"></span><br>
        </div>
      </el-card>
      <el-card class="box-card small-card">
        <div slot="header">
          <span class="cardTitle">上班打卡</span>
        </div>
        <div class="text item">
          <span class="text-warning msg">{{workPunchMsg}}</span><br>
        </div>
        <el-button type="primary" class="pull-right" @click="onArrivePunch" v-if="workPunchStatus">上班打卡</el-button>
      </el-card>
      <el-card class="box-card small-card">
        <div slot="header">
          <span class="cardTitle">本月出勤次数</span>
          <el-tooltip class="item" effect="dark" content="" placement="top">
            <el-button style="float: right; padding: 3px 0" type="text" icon="el-icon-s-operation"/>
          </el-tooltip>
        </div>
        <div class="text item">
          <h2 >{{essentials.punchTime}}/{{essentials.workDays}}</h2>
          <span class="text-success msg" v-show="essentials.excellent">恭喜您，本月您被评为优秀员工！</span>
        </div>
      </el-card>
      <el-card class="box-card small-card">
        <div slot="header">
          <span class="cardTitle">下班打卡</span>
        </div>
        <div class="text item">
          <span class="text-danger msg">{{leavePunchMsg}}</span><br>
        </div>
        <el-button type="primary" class="pull-right" @click="onLeavePunch" v-if="leavePunchStatus">下班打卡</el-button>
      </el-card>
      <el-card class="box-card small-card">
        <div slot="header">
          <span class="cardTitle">请假审批</span>
          <el-tooltip class="item" effect="dark" content="" placement="top">
            <el-button style="float: right; padding: 3px 0" type="text" icon="el-icon-s-operation"/>
          </el-tooltip>
        </div>
        <div class="text item text-center">
          <el-date-picker
            v-model="vacationDate.startDate"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择开始时间"
            default-time="08:00:00">
          </el-date-picker>
          -
          <el-date-picker
            v-model="vacationDate.endDate"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择结束时间"
            default-time="18:00:00">
          </el-date-picker>
        </div>
        <el-button type="primary" class="pull-right" @click="vacation">假期审批</el-button>
      </el-card>
      <span class="clearfix"></span>
    </div>
  </div>
</template>

<script>
// views/system/user/index.vue
import { getEssentialsExtra,workPunch,leavePunch,askForVacation,haveCheckVacation } from "@/api/system/main";

export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "3.8.1",
      userName: "",
      workPunchMsg: "您今天还未上班，无法进行下班打卡！",
      leavePunchMsg: "您今天还未上班，无法进行下班打卡！",
      workPunchStatus: false,
      leavePunchStatus: false,
      userId: 1,
      //基础数据
      essentials:{
        sysNotice: "你好，欢迎来到Halo Employee管理系统",
        todayPunch: 0,
        punchTime: 1,
        workDays: 22,
        excellent: false
      },
      //请假数据
      employeeVacation:{
        id: 0,
        userId: 1,
        vacationStartDate: null,
        vacationEndDate: null
      },
      //请假日期参数
      vacationDate:{
        startDate:'',
        endDate:''
      }
    };
  },
  created() {
    console.log(this.$route.query.userName);
    this.userName = sessionStorage.getItem("user_name");
    this.initEssentials();
  },
  methods: {
    initEssentials(){
      getEssentialsExtra(this.userName).then((extra)=>{
        if(200 === extra.code){
          this.userId = extra.userId;
          this.essentials.sysNotice = extra.sysNotice;
          this.essentials.todayPunch = extra.todayPunch;
          this.essentials.excellent = extra.excellent;
          let todayPunch;
          if((todayPunch = extra.todayPunch)!=null){
            switch (todayPunch.punchStatus){
              //考勤正常
              case 0:
                this.workPunchMsg = "恭喜您，今天的考勤没有任何问题。上班时间："+todayPunch.startTime;
                this.leavePunchMsg = "恭喜您，今天的考勤没有任何问题。下班时间："+todayPunch.endTime;
                this.leavePunchStatus = true;
                break;
              //迟到
              case 1:
                this.workPunchMsg = "很遗憾，您迟到了，上班时间："+todayPunch.startTime;
                this.leavePunchStatus = true;
                if(todayPunch.endTime != null) {
                  this.leavePunchMsg = "恭喜您，今天的下班考勤时间没有问题。下班时间：" + todayPunch.endTime;
                }
                break;
              //早退
              case 2:
                this.workPunchMsg = "恭喜您，今天的上班考勤时间没有问题，上班时间："+todayPunch.startTime;
                this.leavePunchStatus = true;
                if(todayPunch.endTime != null){
                  this.leavePunchMsg = "很遗憾，您早退了，下班时间："+todayPunch.endTime;
                }
                break;
              //迟到加早退
              case 3:
                this.workPunchMsg = "很遗憾，您迟到了，上班时间："+todayPunch.startTime;
                this.leavePunchStatus = true;
                if(todayPunch.endTime != null){
                  this.leavePunchMsg = "很遗憾，您早退了，下班时间："+todayPunch.endTime;
                }
                break;
            }
            let vacation = extra.vacation;
            if(vacation!==null){
              //如果未通过
              if(2 === vacation.status){
                this.$notify.success({
                  title: '请假信息',
                  message: '您在'+vacation.vacationStartDate+" 到 "+vacation.vacationEndDate+" 的假期审批未通过！请向人事部进行沟通！",
                  duration: 0,
                  onClose: ()=>{
                    this.employeeVacation.id = vacation.id;
                    haveCheckVacation(this.employeeVacation).then((res)=>{
                      if(200 === res.code){
                        console.log("查阅成功")
                      }
                    })
                  }
                })
              }else {
                this.$notify.success({
                  title: '请假信息',
                  message: '您在'+vacation.vacationStartDate+" 到 "+vacation.vacationEndDate+" 的假期审批已通过！",
                  duration: 0,
                  onClose: ()=>{
                    this.employeeVacation.id = vacation.id;
                    haveCheckVacation(this.employeeVacation).then((res)=>{
                      if(200 === res.code){
                        console.log("查阅成功")
                      }
                    })
                  }
                })
              }
            }
          }else{
            this.workPunchStatus = true;
          }
          this.essentials.punchTime = extra.punchTime;
          this.essentials.workDays = extra.workDays;
        }
      }).catch(()=>{
        this.$notify.error({
          title: '系统错误',
          message: '获取用户基础数据错误，请联系开发者！'
        });
      });
    },
    onArrivePunch(){
      workPunch(this.userId).then((res)=>{
        if(200 === res.code){
          this.workPunchStatus = false;
          this.leavePunchMsg = "您今天还未进行下班打卡，请记得下班时打卡哦！"
          this.$notify.success({
            title: res.msg,
            message: '上班打卡成功，打卡时间：'+res.punchTime
          })
          this.initEssentials();
        }
      });
    },
    onLeavePunch(){
      leavePunch(this.userId).then((res)=>{
        if(200 === res.code){
          this.$notify.success({
            title: res.msg,
            message: '下班打卡成功，打卡时间：'+res.punchTime
          })
          this.initEssentials();
        }
      });
    },
    vacation(){
      if(this.vacationDate.startDate==='' || this.vacationDate.endDate===''){
        this.$notify.error({
          title: "日期错误",
          message: "目前选择的日期错误，请选择正确的日期！"
        })
      }else {
        this.employeeVacation.vacationStartDate = this.vacationDate.startDate;
        this.employeeVacation.vacationEndDate = this.vacationDate.endDate;
        this.employeeVacation.userId = this.userId;
        askForVacation(this.employeeVacation).then((res)=>{
          if(200 === res.code){
            this.$notify.success({
              title: "审批发起成功",
              message: "请假审批已发送，请等待上级管理员审批。"
            })
            this.initEssentials();
          }
        });
      }
    },
  },

};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
  .text{
    height: 85px;
  }
  .msg{
    font-size: 18px;
  }
  .small-card{
    width: 570px;
    height: 200px;
    margin: 10px;
    float: left;
  }
}
</style>
